<template>
	<s-layout navbar="inner1"  :bgStyle="{ color: 'transparent' }">
		<view class="content">
			<assNavbar title="商务合作" color="#fff" :background="{
				BGcolor:'transparent'
			}"/>
			<image class="bgTop" :src="sheep.$url.cdn('/storage/giveaway/20250314/4b266c8522bdb9d40589f1b51755b77d.png')" mode="widthFix" />
			<swiper  :style="{height: '340rpx',marginTop:'-250rpx'}"  @change="swiperChange" :current="state.current" 
				>
				<swiper-item class="swiper-item" v-for="(item,index) in list" :key="index">
					<scroll-view class="scroll-view" scroll-y :style="{height:`340rpx`}">
						<view class="card">
							<view class="cardBox">
								<image class="cardBox-bg" :src="sheep.$url.cdn(item.image)" mode="widthFix" />
								
								<!-- 区县和地市线下填资料付款，不需要再填资料 BD购买商品填资料；BDM、服务网点直接付款再填资料  -->
								
								<view class="info-time"  v-if="list[state.current]?.is&&index==state.current&&index!=3&&index!=4">
									<text v-if="state.isWrite===false" @tap="jump">还未补充资料，去补充>></text>
									<text v-else @tap="jumpStep">{{state.isWrite!=1?'资料审核进度':'已填写'}}>></text>
									<!-- <text @tap="jump">你已开通，查看收益>></text> -->
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<view class="ss-p-x-20">
				<scroll-view class="scroll-view" scroll-y :style="{height:pageHeight+350+`rpx`}" :scroll-top="state.scrollTop" @scroll="scrollChange">
					<view style="padding-bottom:100rpx!important;">
						<image class="infoCard" :src="sheep.$url.cdn(list[state.current]?.background)" mode="widthFix" />
					</view>
				</scroll-view>
			</view>
			<su-fixed bottom>
				<view class="ss-p-x-20 ss-p-b-60 ss-flex justify-between">
					<template v-if="list[state.current]?.is" >
						<!-- style="width:350rpx" -->
						<button class="ss-reset-button btn " :style="{width:state.isWrite==1?'350rpx':''}"  @tap="sheep.$router.go('/pages/commission/giveaway/vip')">
							我的会员
						</button>
						<button v-if="state.isWrite==1" class="ss-reset-button btn "  style="width:350rpx" @tap="sheep.$router.go('/pages/goods/index?id=1845')">
							代理商户入驻
						</button>
					</template>
					
					<button v-if="!list[state.current]?.is" class="ss-reset-button btn "  @click='btnClick(list[state.current])'>
						<view v-if="state.current==0" style="line-height: 1.4em;font-size:24rpx" >
							<view>前5万个名额￥{{list[state.current]?.price}}</view>
							<view class="font-1 ss-flex a" style="opacity:0.5">原价：<view class="text">￥{{list[state.current]?.original_price}}终身</view></view>
						</view>
						<text v-if="state.current==1">{{'￥'+list[state.current]?.price}}&nbsp;&nbsp;立即参与</text>    
						<template v-if="state.current!=0&&state.current!=1">
							<text v-if="state.isWrite===false"  @tap="jumpStep">立即报名</text>
							<text v-else  @tap="jumpStep">
								{{state.isWrite!=1?'查看报名审核进度':'报名申请已通过'}}
							</text>
						</template>
						
					</button>
				</view>
			</su-fixed>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import assNavbar from "@/components/ass-navbar.vue"
	import {ref ,reactive, computed, onBeforeMount,nextTick } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
	import userApi from "@/sheep/api/user.js"
	
	const sys_navBar = sheep.$platform.navbar;//标题栏高度
 	const template = computed(() => sheep.$store('app').template?.home);
	const state = reactive({
		index:0,
		current:0,
		statusData:{},
		levelData:{},
		code:'',
		type:null,
		scrollTop:0,
		oldScrollTop:0,
		isWrite:false,
		address:null
	})
	let pageHeight = computed(()=>(sheep.$platform.device.safeArea.height  - 44 - 44))
	
	const list=ref([])
	function scrollChange(e){
		state.oldScrollTop=e.detail.scrollTop
	}
	
	// 查看是否填写资料
	async function getStatus(bd_id){
		const res =await sheep.$api.commission.giveaway.cooperation({bd_id})
		if(res.data.length==0){
			state.isWrite=false
		}else{
			state.isWrite=res.data[0]?.status
		}
	}
	
	
	
	onLoad(async (options)=>{
		console.log('options',options)
		state.type=options.type||0//种类   bd2 bdm3 服务4 区县5 城市代理6
		state.current=state.type
		
		if(options.address){
			state.address=options.address||''
		}
		if(options.street){
			state.street=options.street||''
		}
	})
	onShow(async ()=>{
		await getRoleList()
		getStatus(Number(state.current)+2)
	})
	function swiperChange(e){
		state.current = e.detail.current
		getStatus(Number(state.current)+2)
		state.scrollTop=state.oldScrollTop
		nextTick(()=>{
			state.scrollTop=0
		})
		
	}
	async function getRoleList(){
		const res =await sheep.$api.commission.giveaway.roleList()
		list.value=res.data
		list.value[state.current].address=state.address
		list.value[state.current].street=state.street
	}
	
	
	
	

	
	async function btnClick(item){
		console.log('btnClick',item)
		
		// if(state.current!=0&&state.current!=1){
		// 	uni.showToast({
		// 		title:'暂未开放',
		// 		icon:'none',
		// 		duration:2000
		// 	})
		// 	return
		// }
		
		// if(state.current==0&&item.goods_id){//跳转商品购买权益 
		// if(
		// 	sheep.$router.go(`/pages/goods/index?`,{id:item.goods_id})
		// }
		if(state.current==0||state.current==1){//bdm直接支付
			if(item.goods_id){
				sheep.$router.go(`/pages/goods/index?`,{id:item.goods_id})
			}else{
				sheep.$router.redirect('/pages/pay/index',{type:'giveaway',role_id:Number(state.current)+2})
			}
		}else{
			if(state.isWrite===false){//未填写过，去填写
				sheep.$router.go('/pages/commission/giveaway/info-bd',{type:2,bd_id:Number(state.current)+2,address:item.address||'',street:item.street||''})//2公司
			}else{//查看进度
				sheep.$router.go('/pages/commission/merchant/result',{bd_id:Number(state.current)+2})
			}
		}
	}
	function jump(){
		if(state.current==0||state.current==1){
			sheep.$router.go(`/pages/commission/giveaway/info-bd?type=1&bd_id=${Number(state.current)+2}`)//1个人
		}else{
			// sheep.$router.go('/pages/commission/giveaway/info-bd?type=2')//2公司
		}
	}
	function jumpStep(){
		sheep.$router.go('/pages/commission/merchant/result',{bd_id:Number(state.current)+2})
	}
	
	

	
</script>

<style lang="scss" scoped>
	.bgTop{
		width:100%;
		height:331rpx;
		margin-top:v-bind('-sys_navBar+"px"');
	}
	
	.content{
		.swiper-item{
			width:700rpx!important;
			box-sizing: border-box;
			padding: 0 20rpx;
			.scroll-view{
				.card{
					width: 100%;
					height: 310rpx;
					position: relative;
					.cardBox{
						position: absolute;
						bottom: 0;
						// height: 310rpx;
						width: 100%;
						.cardBox-bg{
							// height: 100%;
							width: 100%;
							margin-top:-159rpx;
						}
						.cardBox-hg{
							position: absolute;
							top:-50rpx;
							right: 40rpx;
							width: 290rpx;
							height: 270rpx;
						}
						.cardBox-info{
							position: absolute;
							left: 0;
							top: 0;
							height: 100%;
							width: 100%;
							padding-left: 55rpx;
							box-sizing: border-box;
							.nowLevel{
								position: absolute;
								left: 0;
								top: 0;
								border-radius: 20rpx 0 20rpx 0;
								text-align: center;
								background: rgba(156, 156, 156, 0.5);
								width: 136rpx;
								height: 46rpx;
								font-family: PingFang SC;
								font-size: 24rpx;
								font-weight: normal;
								line-height: 46rpx;
								font-variation-settings: "opsz" auto;
								color: #FFFFFF;
							}
							.info-title{
								margin-top: 60rpx;
								font-family: PingFang SC;
								font-size: 60rpx;
								font-weight: normal;
								line-height: 1;
								letter-spacing: 0px;
								font-variation-settings: "opsz" auto;
								color: #240A00;
							}
							.info-price{
								margin-top: 50rpx;
								font-family: PingFang SC;
								font-size: 24rpx;
								font-weight: normal;
								line-height: 1;
								font-variation-settings: "opsz" auto;
								color: #240A00;
								display: flex;
								align-items: flex-end;
								.rmb{
									font-family: PingFang SC;
									font-weight: 400;
									font-size: 24rpx;
									line-height: 20rpx;
									font-variation-settings: "opsz" auto;
									color: #838B9C;
								}
								.price{
									font-family: PingFang SC;
									font-weight: 400;
									font-size: 40rpx;
									line-height: 36rpx;
									font-variation-settings: "opsz" auto;
									color: #838B9C;
								}
							}
						}
						.info-time{
							position: absolute;
							left: 30rpx;
							bottom: 40rpx;
							// margin-top: 30rpx;
							height: 40rpx;
							line-height: 40rpx;
							font-family: PingFang SC;
							font-size: 24rpx;
							font-variation-settings: "opsz" auto;
							color: #123D86;
							border: 2rpx solid #003288;
							border-radius: 20rpx;
							padding:0 20rpx;
							font-size:26rpx;
							.repair{
								margin-left: 15rpx;
								display: inline-block;
								padding:0 14rpx;
								height: 40rpx;
								border-radius: 40rpx;
								background: #FF8686;
								font-family: PingFang SC;
								font-size: 24rpx;
								font-weight: normal;
								line-height: 40rpx;
								font-variation-settings: "opsz" auto;
								color: #FFFFFF;
							}
						}
					}
				}
				
			}
			
		}
	}
	.infoCard{
		margin-top: 20rpx;
		width: 100%;
	}
	.btn{
		width: 702rpx;
		background: #003288;
		border-radius: 49rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		.text{
			text-decoration:line-through;
		}
	}
</style>